import React, { memo, useState, useCallback } from 'react'
import { Input } from 'antd'
import { LoginWrap } from './style'

import { changeUserInfo } from '@/store/actionCreators'
import { login as goLogin } from '@/api/login/login'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import format from './format'
export default memo(function AppLogin(props) {
    const { setStatus = (() => { }) } = props
    const nickname = useSelector(state => (
        state.getIn(['userInfo', 'nickname'])
    ), shallowEqual)
    //state
    let [phone, setPhone] = useState('')
    let [pwd, setPwd] = useState('')
    let [errMsg, setErrMsg] = useState('')

    /*callback*/

    //修改手机号字段
    let changePhone = useCallback((e) => {
        setPhone(e.target.value)
    }, [])
    //修改密码字段
    const changePwd = useCallback((e) => {
        setPwd(e.target.value)
    }, [])
    //校验账号密码
    let verify = useCallback(() => {
        let regs = /^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/
        if (!regs.test(phone * 1)) {
            setErrMsg('请输入正确的手机号')
            return false
        }
        if (pwd.trim().length < 6) {
            setErrMsg('密码过短')
            return false
        }
        setErrMsg('')
        return true
    }, [phone, pwd])
    //关闭弹窗
    const close = useCallback(() => {
        setStatus(false)
    }, [setStatus])
    //登录
    const dispatch = useDispatch()
    let login = useCallback(() => {
        //校验通过才发请求
        if (verify()) {
            const data = {
                phone,
                password: pwd
            }
            goLogin(data).then(res => {
                if(res.code === 200){
                    close()
                    window.localStorage.setItem('Cookie',res.cookie)
                    window.localStorage.setItem('MUSIC_TOKEN',res.token)
                    const userInfo = format(res)
                    dispatch(changeUserInfo(userInfo))
                }else{
                    setErrMsg(res.msg)
                }
            }).catch(err=>{
                setErrMsg('请求失败')
            })
        }
    }, [verify, phone, pwd,dispatch,close])
    return (
        <LoginWrap>
            <div className="title">
                手机号登录
                <i onClick={close}></i>
            </div>
            <div className="content">
                <Input placeholder="手机号" type="number" maxLength="11" onChange={changePhone}></Input>
                <Input placeholder="密码" type="password" onChange={changePwd}></Input>
                <div className="errMsg">
                    {errMsg}
                </div>
                <div className="btn sprite_button" onClick={login}>
                    <i className="sprite_button">登陆</i>
                </div>
            </div>
            <div className="bootom">
                目前仅有这一种登陆方式,暂时并不考虑添加其他登陆方式{nickname}
            </div>
        </LoginWrap>
    )
})
